<template>
	<view>
		<!-- 选项卡 -->
		<view class="tabs">
			<tabs :tabMenu="tabMenu" @checkIndex="checkIndex"></tabs>
		</view>
		<!-- 卡券 -->
		<view v-if="cardList.length">
			<view v-if="tabsIndex == 2" class="card_list_wrap">
				<view class="card_list" v-for="(item, index) in cardList" :key="index">
					<image :src="mixDiscountIconList[2].icon || 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/historyCardVoucher.png'" class="card_list_bg"></image>

					<view class="card_left">
						<view class="crad_left_money">
							<text class="money_type">￥</text>
							<text class="money_amonut">{{ item.couponBalance }}</text>
						</view>
						<view class="voucher_type" v-if="item.useType == 'ZhiDing'">站点专属</view>
						<view class="voucher_type" v-else-if="item.useType == 'QuanChang'">通用券</view>
					</view>

					<view class="card_right">
						<view class="card_right_top">
							<view>
								<view class="coupon_type">{{ item.couponTypeStr }}</view>
								<view class="full_reduction">满{{ item.limitBalance }}可用</view>
							</view>
							<image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/sx.png" class="sx"></image>
						</view>
						<view class="validity_date">有效期{{ item.startDate }}-{{ item.endDate }}</view>
					</view>
				</view>
				<view class="loading" v-if="loading">
					<!-- <van-loading type="spinner" size="40rpx" /> -->
				</view>
			</view>
			<view v-if="tabsIndex == 3" class="card_list_wrap">
				<view class="card_list" v-for="(item, index) in cardList" :key="index" style="margin-bottom: 16rpx;">
					<!-- <van-swipe-cell :right-width="70" async-close @close="onClose($event, { id: item.id })" :data-id="item.id" class="van-swipe-cell">
							<van-cell-group class="van-cell-group">
									<van-cell class="van-cell"> -->
					<u-swipe-action autoClose>
						<u-swipe-action-item
										:options="options"
										autoClose
										@click="click(item.id)"
						>
							<view class="card_list">
								<image :src="mixDiscountIconList[2].icon || 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/historyCardVoucher.png'" class="card_list_bg"></image>
								<!-- <image src="../../images/historyCardVoucher.png"></image> -->
								<view class="card_left">
									<view class="crad_left_money">
										<text class="money_type">￥</text>
										<text class="money_amonut">{{ item.couponBalance }}</text>
									</view>
									<view class="voucher_type" v-if="item.useType == 'ZhiDing'">指定站点</view>
									<view class="voucher_type" v-else-if="item.useType == 'QuanChang'">全场通用</view>
								</view>
								<view class="card_right">
									<view class="card_right_top">
										<view>
											<view>
												<text class="coupon_type">{{ item.couponTypeStr }}</text>
												<text class="verification" v-if="item.refundRemark">退款核销</text>
											</view>
											<view class="full_reduction">满{{ item.limitBalance }}可用</view>
										</view>
										<image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/failure.png" class="sx"></image>
									</view>
									<view class="validity_date"><image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/icon1.png"></image>{{ item.startDate }}</view>
									<view class="validity_date"><image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/icon2.png"></image>{{ item.endDate }}</view>
								</view>
							</view>
							<!--    </van-cell>
							</van-cell-group> -->
						</u-swipe-action-item>
					</u-swipe-action>
					<!-- <view slot="right" class="van-swipe-cell__right">
							 <image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/icon.png" class="delete-icon"></image>
							 <view class="delete-text">删除</view>
					 </view> -->
					<!-- </van-swipe-cell> -->
				</view>
				<view class="loading" v-if="loading">
					<!-- <van-loading type="spinner" size="40rpx" /> -->
				</view>
			</view>
		</view>
		<Upgrading text="暂无内容" v-if="cardList.length<=0&&loading"></Upgrading>
		<!-- 联系客服 -->
		<u-popup  mode="center" :round="16" :show="showDelete" @close="onCloseDelete">
			<view style="padding-top:46rpx;width:680rpx;box-sizing: border-box;position: relative;height: 375rpx;">
				<view class="title">提示</view>
				<view class="info">确定删除此券？</view>
				<!-- <view class="info">联系客服：{{ refundAmountInfo.customerTelephone }}</view>
				<view class="info">工作时间：{{ refundAmountInfo.customerServiceTime }}</view> -->
				<view class="customerBtn">
					<view class="btn1" @tap="onCloseDelete">取消</view>
					<view class="btn2" @tap="confirmDelete">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 站点弹窗 -->
		<!-- <van-popup
bind:close="onClose"
position='center'
show="{{deleteVisible}}"
custom-style="border-radius: 16rpx;"
class="delete-popup"
>
<view class="delete">
		<view  class="delete-content">
				<view class="delete-title">确定删除此券？</view>
		</view>
		<view class="delete-btn">
				<view class="delete-cancel" bindtap="deleteCancel">取消</view>
				<view class="delete-confirm" bindtap="deleteConfirm">确定</view>
		</view>
</view>
</van-popup> -->
		<!-- <van-dialog id="van-dialog" /> -->
	</view>
</template>

<script>
	'use strict';
	import tabs from '../../../components/tabs/tabs';
	import Upgrading from '../../../components/upgrading/upgrading';

	var __importDefault =
		(this && this.__importDefault) ||
		function (mod) {
			return mod && mod.__esModule
				? mod
				: {
					default: mod
				};
		};

	// exports.__esModule = true; // mine/pages/historyCardVoucher/historyCardVoucher.ts

	// var dialog_1 = __importDefault(require('./../../../miniprogram_npm/@vant/weapp/dialog/dialog.js'));

	var https_1 = require('./../../../api/https.js');
	export default {
		components: {
			tabs,
			Upgrading
		},
		data() {
			return {
				tabMenu: ['已使用', '已失效'],
				tabsIndex: 2,
				cardList: [],
				deleteVisible: false,
				deleteId: null,
				instances: '',
				eData: null,
				loading: false,
				page: 1,
				pageNum: 0,
				showDelete:false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c',
						height:'220rpx'

					}
				}]
			};
		},
		onLoad: function () {
			this.CouponPage(1);
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function () {
			this.page = 1;

			if (this.cardList.length) {
				uni.showNavigationBarLoading(); //在标题栏中显示加载图标
			}

			this.CouponPage(4);
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function () {
			var page = this.page + 1; //获取当前页数并+1

			if (this.page < this.pageNum) {
				this.page=page
				this.CouponPage(1);
			}
		},
		methods: {
			checkIndex: function (e) {
				var detail = e.detail;

				switch (detail) {
					case 0:
						this.tabsIndex=2,
							this.page= 1
						break;

					case 1:
						this.tabsIndex= 3,
							this.page= 1
						break;
				}

				this.CouponPage(this.tabsIndex);
			},

			// 获取卡券列表
			CouponPage: function (index) {
				var that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.loading=false
				https_1
					.getMyCouponPage({
						tab: that.tabsIndex,
						current: that.page,
						size: 10
					})
					.then(function (res) {
						if (res.code == 0) {
							// 总数据
							var total = res.data.total;
							var pageNum = Math.ceil(total / 10);
							var cardList = void 0;

							switch (index) {
								// 已使用
								case 2:
									cardList = res.data.records;
									break;
								// 已失效

								case 3:
									cardList = res.data.records;
									break;
								// 下拉刷新

								case 4:
									cardList = res.data.records;
									uni.hideNavigationBarLoading(); //在标题栏中隐藏加载图标

									if (cardList.length) {
										uni.stopPullDownRefresh();
									} else {
										setTimeout(function () {
											uni.stopPullDownRefresh();
										}, 100);
									}

									break;
								// 页面初始化及上拉加载

								case 1:
									cardList = cardList = that.cardList.concat(res.data.records);
									break;
							}

							that.cardList=cardList,
								that.pageNum= pageNum
								uni.hideLoading();
						that.loading=true
						} else if (res.code == 4) {
							var cardList = [];
							that.cardList= cardList
							uni.hideLoading();
						that.loading=true
						}
					});
			},

			// couponDelete(e: any){
			//     const {currentTarget:{dataset:{id}}} = e
			//     if(id){
			//         this.deleteId=id
			//     }
			// },
			deleteCancel: function () {
				this.deleteVisible= false
			},

			onClose: function (e, _dataset) {
				/* ---处理dataset begin--- */
				this.datasetHandle(e, _dataset);
				/* ---处理dataset end--- */
				var that = this;
				var id = e.currentTarget.dataset.id;

				if (id) {
					this.deleteId= id
				}

				var _a = e.detail;
				var position = _a.position;
				var instance = _a.instance;

				switch (position) {
					case 'left':
					case 'cell':
						instance.close();
						break;

					case 'right':
						dialog_1['default']
							.confirm({
								message: '确定删除此券?'
							})
							.then(function () {
								that.deleteConfirm();
								instance.close();
							})
							['catch'](function (err) {
							console.log(err);
						});
						break;
				}
			},

			deleteConfirm: function () {
				var that = this;
				that.page = 1;
				https_1
					.myCouponDelete({
						id: that.deleteId
					})
					.then(function (res) {
						if (res.code == 0) {
							that.deleteVisible=false
							that.CouponPage(3);
						}
					});
			},
			click(id){
				if (id) {
					this.deleteId= id
				}
				console.log(1222)
				this.showDelete = true
			},
			onCloseDelete(){
				this.showDelete = false
			},
			confirmDelete(){
				var that = this;
				that.page = 1;
				https_1
					.myCouponDelete({
						id: that.deleteId
					})
					.then(function (res) {
						console.log(res,677111,)
						if (res.code == 0) {
							that.showDelete=false
							that.CouponPage(3);
						}
					});
			}
		}
	};
</script>
<style lang="less">
	@import url('./historyCardVoucher.less');
</style>
